<template>
  <el-form label-width="6vw">
    <el-form-item :label="'托盘料号'">
      <!-- <el-select
        v-model="trayConfig.reelCode"
        :placeholder="$t('editFormula.partNo')"
        filterable
        @change="partNoChange"
      >
        <el-option
          v-for="item of material.reel"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select> -->
      <el-input v-model="trayConfig.trayCode" placeholder="托盘料号"></el-input>
    </el-form-item>
    <el-form-item label="托盘描述">
      <el-input v-model="trayConfig.trayDesc" placeholder="托盘描述"></el-input>
    </el-form-item>
    <el-form-item :label="t('editFormula.long')">
      <el-input-number v-model="trayConfig.trayLong"></el-input-number>
    </el-form-item>
    <el-form-item :label="t('editFormula.width')">
      <el-input-number v-model="trayConfig.trayWidth"></el-input-number>
    </el-form-item>
    <el-form-item label="单层厚度">
      <el-input-number v-model="trayConfig.trayHeight"></el-input-number>
    </el-form-item>
    <el-form-item label="层数">
      <el-input-number
        v-model="trayConfig.floor"
        placeholder="层数"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="整盘芯片数量">
      <el-input-number
        v-model="trayConfig.baseQuantity"
        placeholder="整盘芯片数量"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="绑带宽度">
      <el-input-number
        v-model="trayConfig.tieWidth"
        placeholder="绑带宽度"
        :min="1"
      />
    </el-form-item>
    <el-form-item label="水平绑带数量">
      <el-input-number
        v-model="trayConfig.tieXnum"
        placeholder="水平绑带数量"
        :min="0"
        @change="changeTie('x')"
      />
    </el-form-item>
    <el-form-item label="竖直绑带数量">
      <el-input-number
        v-model="trayConfig.tieYnum"
        placeholder="水平绑带数量"
        :min="0"
        @change="changeTie('y')"
      />
    </el-form-item>
    <el-form-item label="保护带料号">
      <el-select
        v-model="trayConfig.beltCode"
        placeholder="保护带料号"
        clearable
        filterable
      >
        <el-option
          v-for="item of material.protectiveBelts"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="泡棉料号">
      <el-select
        v-model="trayConfig.protectiveTapeCode"
        placeholder="泡棉料号"
        clearable
        filterable
      >
        <el-option
          v-for="item of material.foam"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="美纹胶料号">
      <el-select
        v-model="trayConfig.maskingTapeCode"
        placeholder="美纹胶料号"
        clearable
        filterable
      >
        <el-option
          v-for="item of material.maskingTape"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <template v-if="trayConfig.traceLabel">
      <el-form-item label="追溯标签位置">
        <el-select
          v-model="trayConfig.traceLabelSide"
          placeholder="追溯标签位置"
        >
          <el-option label="正面" :value="0"></el-option>
          <el-option label="反面" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </template>
    <el-form-item label="有无端盖">
      <el-switch
        v-model="trayConfig.hasCap"
        active-text="有"
        inactive-text="无"
      ></el-switch>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { computed } from "vue";
import editStore from "@/store/editStore.js";
import { useI18n } from "vue-i18n";
import { getUUID } from "@/utils/index.js";

const { t } = useI18n();
const store = editStore();

let trayConfig = computed(() => store.trayConfig);
let material = computed(() => {
  let list = store.materialList;
  return {
    reel: list.reel,
    protectiveBelts: list.protectiveBelts,
    foam: list.foam,
    carrierTape: list.carrierTape,
    maskingTape: list.maskingTape,
  };
});

// function partNoChange(e) {
//   let reels = material.value.reel;
//   let reel = reels.find((item) => item.materialCode == e);
//   if (reel) {
//     trayConfig.value.reelDesc = reel.description;
//     trayConfig.value.reelThickness = reel.thickness;
//     trayConfig.value.sizeType = reel.size;
//     trayConfig.value.reelDiameter = reel.diameter;
//     trayConfig.value.frontImg = reel?.imgPath?.[0] ?? "";
//     trayConfig.value.oppositeImg = reel?.imgPath?.[1] ?? "";
//   }
// }

function changeTie(t) {
  if (t == "x") {
    let length = trayConfig.value.tieX.length;
    if (length < trayConfig.value.tieXnum) {
      trayConfig.value.tieX.push({
        id: getUUID(),
        x: 0,
        y: trayConfig.value.trayWidth / 2,
      });
    } else {
      trayConfig.value.tieX.pop();
    }
  } else {
    let length = trayConfig.value.tieY.length;
    if (length < trayConfig.value.tieYnum) {
      trayConfig.value.tieY.push({
        id: getUUID(),
        x: trayConfig.value.trayLong / 2,
        y: 0,
        lock: true,
      });
    } else {
      trayConfig.value.tieY.pop();
    }
  }
}
</script>
<style scoped lang="scss">
.globalSetting {
  .flex-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
